{% extends 'wancake/base_nav_frame.html' %}
{% load staticfiles %}
{% block css %}
  <link rel="stylesheet" href="{% static 'wancake/css/index.css' %}" />
{% endblock %}
{% block content %}
  <div id="wb-index-content">

    <div class="row panel panel-default">
      <div class="panel-heading"><h4>今日</h4></div>
      <div class="panel-body">
        <div class="container-fluid">
          <div class="row" id="wb-total-data-panel">
            <!-- 分时图表 -->
            <div class="container col-md-9 col-sm-9">
              <canvas id="wb-data-current" width="1" height="1"></canvas>
            </div>
            <!-- 今日统计数据内容 -->
            <div class="container col-md-3 col-sm-3">
              <div class="row">
                <div class="col-md-12 col-sm-12">
                  <p class="wb-datatable-item wb-datatable-label wb-datatable-label-main">订购量</p>
                  <p class="wb-datatable-item">
                    <span class="wb-datatable-value wb-datatable-value-main" id="wb-digest-value-orders">--</span>
                  </p>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-12">
                  <p class="wb-datatable-item wb-datatable-label">用户量</p>
                  <p class="wb-datatable-item">
                    <span class="wb-datatable-value" id="wb-digest-value-users">--</span>
                    <span class="wb-datatable-value-unit">人</span>
                  </p>
                </div>
                <div class="col-md-6 col-sm-12">
                  <p class="wb-datatable-item wb-datatable-label">访问量</p>
                  <p class="wb-datatable-item">
                    <span class="wb-datatable-value" id="wb-digest-value-pv">--</span>
                    <span class="wb-datatable-value-unit">次</span>
                  </p>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-12">
                  <p class="wb-datatable-item wb-datatable-label">内容数</p>
                  <p class="wb-datatable-item">
                    <span class="wb-datatable-value" id="wb-digest-value-contents">--</span>
                    <span class="wb-datatable-value-unit">条</span>
                  </p>
                </div>
                <div class="col-md-6 col-sm-12">
                  <p class="wb-datatable-item wb-datatable-label">播放时长</p>
                  <p class="wb-datatable-item">
                    <span class="wb-datatable-value" id="wb-digest-value-durations">--</span>
                    <span class="wb-datatable-value-unit">小时</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row panel panel-default">
      <div class="panel-heading">
        <h4 class="wb-panel-wigdet">业务数据</h4>
        <div class="dropdown wb-panel-wigdet-right">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="dataType" aria-expanded="false">
            高清/标清
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dataType">
            <li role="presentation"><a role="menuitem" tabindex="0" href="#">高清/标清</a></li>
            <li role="presentation"><a role="menuitem" tabindex="1" href="#">高清</a></li>
            <li role="presentation"><a role="menuitem" tabindex="2" href="#">标清</a></li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <td>日期</td>
            <td>访问量</td>
            <td>用户数</td>
            <td>新增量</td>
            <td>玩吧订购量</td>
            <td>Happy Dog订购量</td>
            <td>DogTV订购量</td>
            <td>单品订购</td>
          </tr>
        </thead>
        <tbody id="wb-business-statis">
        </tbody>
      </table>
      <div class="panel-footer">
        <div class="btn-group wb-table-pager" id="wb-business-statis-pager">
          <button type="button" class="btn btn-default wb-pager-first">
            <span class="glyphicon glyphicon-step-backward"></span>
          </button>
          <button type="button" class="btn btn-default wb-pager-prev">
            <span class="glyphicon glyphicon-triangle-left"></span>
          </button>
          <button type="button" class="btn btn-default wb-pager-item-0"></button>
          <button type="button" class="btn btn-default wb-pager-item-1"></button>
          <button type="button" class="btn btn-default wb-pager-item-2"></button>
          <button type="button" class="btn btn-default wb-pager-item-3"></button>
          <button type="button" class="btn btn-default wb-pager-item-4"></button>
          <button type="button" class="btn btn-default wb-pager-item-5"></button>
          <button type="button" class="btn btn-default wb-pager-item-6"></button>
          <button type="button" class="btn btn-default wb-pager-next">
            <span class="glyphicon glyphicon-triangle-right"></span>
          </button>
          <button type="button" class="btn btn-default wb-pager-last">
            <span class="glyphicon glyphicon-step-forward"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block jsimport %}
  <script src="{% static 'utils/Chart.min.js' %}" ></script>
{% endblock %}
{% block jsscript %}
  <script type="text/javascript">
    $(document).ready(function(e) {

      var currentPageNumber = 1;
      var totalPageNumber = 0;

      loadData = function(pageNumber) {
        $.ajax("./getindexbusinessstatis", {
          data : {
            pagenum : pageNumber
            , pagesize : 5
          },
          type : "GET",
          dataType : "json",
          success : function(data) {
            if (data.data && data.data.list && data.data.list.length) {
              var list = data.data.list;
              var length = list.length;
              var businessStatisTBody = $("#wb-business-statis");
              $(businessStatisTBody).empty();
              var pvList = [];
              var datetime = [];
              for (var i = 0; i < length; i++) {
                var item = list[i];
                var tr = $('<tr />');
                $(tr).append($('<td />').text(item.datetime));
                $(tr).append($('<td />').text(item.pv_hd + "/" + item.pv_sd));
                $(tr).append($('<td />').text(item.users_hd + "/" + item.users_sd));
                $(tr).append($('<td />').text(item.new_series_hd + "/" + item.new_series_sd));
                $(tr).append($('<td />').text(item.wanba_hd + "/" + item.wanba_sd));
                $(tr).append($('<td />').text(item.happydog_hd + "/" + item.happydog_sd));
                $(tr).append($('<td />').text(item.dogtv_hd + "/" + item.dogtv_sd));
                $(tr).append($('<td />').text(item.other_hd + "/" + item.other_sd));
                $(tr).appendTo(businessStatisTBody);
                pvList.push(item.pv_hd);
                datetime.push(item.datetime);
              }

              var currentPage = data.data.currentPage;
              var totalPage = data.data.totalPage;
              currentPageNumber = currentPage;
              totalPageNumber = totalPage;

              resetPager(currentPage, totalPage);
            }
          },
          error : function() {

          }
        });
      };

      var resetPager = function(currPage, totalPage) {
        var dom = $("#wb-business-statis-pager");
        var MAX_SIZE = 7;
        if (totalPage > 7) {
          var first = $(dom).find(".wb-pager-first");
          $(first).attr({
            "page-number" : 1
          });
          $(first).show();
          $(first).unbind("click");
          $(first).bind("click", function(e) {
            loadData(parseInt($(this).attr("page-number")));
          });
          var prev = $(dom).find(".wb-pager-prev");
          $(prev).attr({
            "page-number" : (currPage - 1 > 0 ? currPage - 1 : 1)
          });
          $(prev).show();
          $(prev).unbind("click")
          $(prev).bind("click", function(e) {
            loadData(parseInt($(this).attr("page-number")));
          });
          var next = $(dom).find(".wb-pager-next");
          $(next).attr({
            "page-number" : (currPage + 1 <= totalPage ? currPage + 1 : totalPage)
          });
          $(next).show();
          $(next).unbind("click");
          $(next).bind("click", function(e) {
            loadData(parseInt($(this).attr("page-number")));
          });
          var last = $(dom).find(".wb-pager-last");
          $(last).attr({
            "page-number" : totalPage
          });
          $(last).show();
          $(last).unbind("click");
          $(last).bind("click", function(e) {
            loadData(parseInt($(this).attr("page-number")));
          });
        } else {
          var first = $(dom).find(".wb-pager-first");
          $(first).hide();
          var prev = $(dom).find(".wb-pager-prev");
          $(prev).hide();
          var next = $(dom).find(".wb-pager-next");
          $(next).hide();
          var last = $(dom).find(".wb-pager-last");
          $(last).hide();
        }

        var edgeNumber = (MAX_SIZE - 1) / 2;
        var beforeItemNumber = Math.min(currPage - 1, edgeNumber);
        var afterItemNumber = Math.min(totalPage - currPage, edgeNumber);
        if (afterItemNumber < edgeNumber) {
          beforeItemNumber += (edgeNumber - afterItemNumber);
        }
        if (beforeItemNumber + 1 + afterItemNumber < Math.min(totalPage, MAX_SIZE)) {
          afterItemNumber = Math.min(totalPage, MAX_SIZE) - 1 - beforeItemNumber;
        }

        var curr = $(dom).find(".wb-pager-item-" + beforeItemNumber);
        $(curr).attr({
          "page-number" : currPage
        });
        $(curr).show();
        $(item).unbind("click");
        $(curr).bind("click", function(e) {
            loadData(parseInt($(this).attr("page-number")));
          });
        $(curr).text("" + currPage);
        for (var i = 0; i < beforeItemNumber; i++) {
          var item = $(dom).find(".wb-pager-item-" + i);
          $(item).attr({
            "page-number" : (currPage - beforeItemNumber + i)
          });
          $(item).show();
          $(item).text("" + (currPage - beforeItemNumber + i));
          $(item).unbind("click");
          $(item).bind("click", function(e) {
            loadData(parseInt($(this).attr("page-number")));
          });
        }
        for (var i = 0; i < afterItemNumber; i++) {
          var item = $(dom).find(".wb-pager-item-" + (beforeItemNumber + i + 1));
          $(item).attr({
            "page-number" : (currPage + i + 1)
          });
          $(item).show();
          $(item).text("" + (currPage + i + 1));
          $(item).unbind("click");
          $(item).bind("click", function(e) {
            loadData(parseInt($(this).attr("page-number")));
          });
        }
      };

      loadData(currentPageNumber);

      $.ajax("./getindex30daypv", {
        type : "GET",
        dataType : "json",
        success : function(json) {
          if (json.resultCode && json.data && json.data.list && json.data.list.length) {
            var list = json.data.list;
            var length = list.length;

            var dateLabel = [];
            var hdDataSet = [];
            var sdDataSet = [];

            for (var i = length - 1; i >= 0; i--) {
              var item = list[i];
              dateLabel.push(item.datetime);
              hdDataSet.push(item.pv_hd);
              sdDataSet.push(item.pv_sd);
            }

            var canvasCurrent = $("#wb-data-current");
            if (canvasCurrent) {
                var canvasCurrentParent = $(canvasCurrent).parent();
                if (canvasCurrentParent) {
                    $(canvasCurrent).attr({
                        width : $(canvasCurrentParent).width()
                        , height : $(canvasCurrentParent).parent().height()
                    });
                }
                var context = $(canvasCurrent).get(0).getContext("2d");
                var data = {
                    labels: dateLabel,
                    datasets: [
                        {
                            label: "My First dataset",
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: hdDataSet
                        },
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: sdDataSet
                        }
                    ]
                };
                var chart = new Chart(context).Line(data, {

                });
            }
          }
        },
        error : function() {

        }
      });

      $.ajax("./getindexdigest", {
        type : "GET"
        , dataType : "json"
        , success : function(json) {
          if (json.resultCode && json.data) {
            var data = json.data;
            $("#wb-digest-value-orders").text(data.orders);
            $("#wb-digest-value-users").text(data.users);
            $("#wb-digest-value-pv").text(data.pv);
            $("#wb-digest-value-contents").text(data.contents);
            $("#wb-digest-value-durations").text(data.durations);
          }
        }
        , error : function() {

        }
      })

    });
  </script>
{% endblock %}